@PAGER_PADDINGS: 8px;

.dx-pager {
    overflow: hidden;
    width: 100%;
    padding-top: @PAGER_PADDINGS;
    padding-bottom: @PAGER_PADDINGS;
    line-height: normal;
    .user-select(none);

    .dx-pages {
        float: right;

        .dx-page {
            &:first-child {
                margin-left: 1px;
            }

            display: inline-block;
            cursor: pointer;
            padding: 7px 8px 8px;
            margin-left: 5px;
            margin-right: 1px;
        }

        .dx-separator {
            display: inline-block;
            padding-left: 8px;
            padding-right: 8px;
        }

        .dx-info {
            display: inline-block;
            margin-right: 9px;
            opacity: .6;
        }

        .dx-navigate-button {
            width: 10px;
            height: 20px;
            cursor: pointer;
            display: inline-block;
            vertical-align: top;
            padding: @PAGER_PADDINGS - 1px 13px;
            .box-sizing(content-box);

            &.dx-button-disable {
                opacity: .3;
                cursor: inherit;
            }
        }

        .dx-prev-button, .dx-next-button {
            position: relative;
        }
    }

    .dx-page-sizes {
        float: left;

        .dx-page-size {
            &:first-child {
                margin-left: 1px;
            }

            display: inline-block;
            cursor: pointer;
            padding-left: 10px;
            padding-right: 9px;
            padding-top: 7px;
            padding-bottom: 8px;
            margin-left: 4px;
            margin-right: 1px;
        }
    }

    .dx-pages, .dx-page-sizes {
        .dx-selection {
            cursor: inherit;
            .text-shadow(none);
        }
    }

    .dx-light-pages {
        display: inline-block;

        .dx-page-index {
            width: 40px;
        }
        .dx-pages-count {
            cursor: pointer;
        }
        .dx-info-text, .dx-pages-count {
            padding-left: 6px;
        }
        .dx-page-index, .dx-info-text, .dx-pages-count {
            display: table-cell;
        }
    }
}

.dx-rtl .dx-pager,
.dx-pager.dx-rtl {
    .dx-pages {
        float: left;
        direction: ltr;

        .dx-page {
            direction: ltr;
        }
    }

    .dx-page-sizes {
        float: right;
    }
}
